<template>
  <a-drawer
    :width="drawerWidth"
    @close="handleCancel"
    :visible="visible"
    :confirmLoading="confirmLoading"
  >
    <template  slot="title">
      <div style="width: 100%;">
        <span>{{ title }}</span>
        <span style="display:inline-block;width:calc(100% - 51px);padding-right:10px;text-align: right">
          <a-button @click="toggleScreen" icon="appstore" style="height:20px;width:20px;border:0px"></a-button>
        </span>
      </div>
    </template>


      <a-spin :spinning="confirmLoading" class="drawer-content">
        <a-form :form="form">
          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="名称">
            <a-input autocomplete="off" placeholder="请输入名称" v-decorator="['name', {rules:getValidator(true, 100, 1, null, false)}]"/>
          </a-form-item>

          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="编码">
            <a-input autocomplete="off" placeholder="请输入编码" v-decorator="['code', {rules:getValidator(true, 100, 1, null, true)}]"/>
          </a-form-item>
          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="部门">
            <ak-tree-select
              :url="`${sysDepartUrl.tree}?_v=${version}`"
              v-decorator="['sysDepartId', {rules:getValidator(true)}]"
            />
          </a-form-item>
          <a-form-item
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol"
                  label="机构数据范围">
            <ak-tree-select-multiple :url="`${url.findDataRangeByName}?name=sysDepart&_v=${version}`"   v-decorator="['sysDepartDataRange', {}]" />
          </a-form-item>

          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="备注"
            hasFeedback >
            <a-textarea placeholder="请输入描述" v-decorator="['description', {rules:getValidator(false, 200)}]" />
          </a-form-item>
        </a-form>
      </a-spin>
      <div class="drawer-bootom-button" v-show="!disableSubmit">
        <a-popconfirm title="确定放弃编辑？" @confirm="handleCancel" okText="确定" cancelText="取消">
          <a-button style="margin-right: .8rem">取消</a-button>
        </a-popconfirm>
        <a-button @click="handleSubmit" type="primary" :loading="confirmLoading">提交</a-button>
      </div>
  </a-drawer>
</template>

<script>
  import AkfhModelDrawMixin from '../../../mixin/AkfhModelDrawMixin';
  import {sysRoleUrl, sysDepartUrl} from '../../../api/url';
  import ATextarea from "ant-design-vue/es/input/TextArea";
  import AFormItem from "ant-design-vue/es/form/FormItem";
  import AkDictSelectTag from "../../../components/akfh/AkDictSelectTag";
  import AkTreeSelect from "../../../components/akfh/AkTreeSelect";
  import AkTreeSelectMultiple from "../../../components/akfh/AkTreeSelectMultiple";

  export default {
    name: 'RoleModel',
    components: {AkTreeSelectMultiple, AkTreeSelect, AkDictSelectTag, AFormItem, ATextarea},
    mixins:[AkfhModelDrawMixin],

    data(){
      return {
        url:sysRoleUrl,
        sysDepartUrl:sysDepartUrl,
        entity:'SysRoleEntity'
      }
    },
    mounted(){
    },
    methods:{
      afterFullData(){
        if(this.model.dataRange){
          this.model.sysDepartDataRange = JSON.parse(this.model.dataRange).sysDepart.join(",")
        }else{
          this.model.sysDepartDataRange = "";
        };
      },
      beforeHandleSubmit(formData){
        formData.dataRange = JSON.stringify({"sysDepart":formData.sysDepartDataRange.split(",")});
        return true;
      },
    }
  }
</script>

<style scoped>
.drawer-bootom-button {
    position: absolute;
    bottom: 0;
    width: 100%;
    border-top: 1px solid #e8e8e8;
    padding: 20px 16px;
    text-align: right;
    left: 0;
    background: #fff;
    border-radius: 0 0 2px 2px;
  }
</style>
